<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>clone mobileme style</title>
<link type="text/css" rel="stylesheet" href="css/mobileme.css">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function showBorder(cellIndex){
	$("#div"+cellIndex).show();	
};
function hidePrevious(previousCellIndex){
	$("#div"+previousCellIndex).hide(500);	
};
$(document).ready(function(){
	var previousCellIndex=-1;
	$(".eye-transparent-mouse-opaque").mousemove(
			function mousemove(e){
				//alert(e.layerX+','+ e.layerX);
				//[15-142-15] for a cell
				var index = Math.floor(e.layerX/172);
				if(previousCellIndex == -1)
				{
					showBorder(index);
					previousCellIndex = index;
				}
				if(previousCellIndex!=index)
				{
					showBorder(index);
					hidePrevious(previousCellIndex);
					previousCellIndex = index;
				}
			});
});


</script>

</head>
<body>

<div id="tileImageContainer">
	<div id="tileImageContainerSub">
	<!-- 选中效果绘制层 -->
		
		<div class="eye-transparent-mouse-opaque"></div>
		<!-- 用来控制鼠标形状的一层 -->
		
		<div id="showBorderLayer">
			<c:set var="magicNumber" value="8"></c:set>
			<c:forEach begin="0" end="5" var="index">
				<c:if test="${index>2}">
					<c:set var="magicNumber" value="6"></c:set>
				</c:if>
				
				<div id="div${index}" style="left: ${172*index + magicNumber}px; ">
					<img style="top: 0px; left: 0px;" src="img/sel_box.png">
				</div>
			</c:forEach>
		</div>
	
		<img src="img/masthead.png" id="tileImage" style="left: 0px; top: 15px; z-index: 2;">
		
		<!-- 鼠标点击效果 -->
		<!-- 遮罩层和选中边框 -->
		<img src="img/masthead_sel_mask.png" style="left: 16px; top: 15px; z-index: 3; display: none; opacity: 0;">
		<img src="img/masthead_sel_mask.png" style="left: 873px; top: 15px; z-index: 3; display: block;">
		<div style="left: 865px; top: 7px;  width: 100%; height: 100%; z-index: 3; opacity: 0.7;">
			<img style="top: 0px; left: 0px;" src="img/sel_box.png">
		</div>
	
	</div>
</div>

</body>
</html>